import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';

import Swiper from 'react-native-swiper';


class SwiperComponent extends Component {

    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Swiper horizontal={true} 
                // paginationStyle={{bottom: 10}}
            autoplay dot={
                <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />
            } activeDot= {
                <View style={{backgroundColor:'rgba(0,0,0,1)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />
            }>
                <View style={styles.slide}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            </Swiper>
        )
    }

}

export default SwiperComponent;

const styles = StyleSheet.create({
    wrapper: {
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }
})